<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			html,body{
				height: 100%;
			}
			.container-update {
				height: 100%;
				width: 100%;
				position: absolute;
				background-color: rgba(255, 255, 255,0.3);
			}
			.container-update .update {
				position: absolute;
				background-color: rgb(189, 181, 157);
				width: 500px;
				height: 400px;
				left: 50%;
				top: 40%;
				transform: translate(-50%,-40%);
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
			}
			.container-update .update section{
				width: 300px;
				margin: 0 auto;
				display: flex;
			}
			.container-update .update section label {
				width: 100px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				box-sizing: border-box;
			}
			.container-update .update section input {
				height: 30px;
				width: 200px;
				box-sizing: border-box;
				border: 1px solid #ccc;
			}
			.container-update .update section select {
				height: 30px;
				width: 200px;
				box-sizing: border-box;
				border: 1px solid #ccc;
			}
			.container-update > .update > p {
				position: absolute;
				top: 15px;
				left: 15px;
			}
			.container-update > .update > a {
				position: absolute;
				top: 5px;
				right: 5px;
				background-color: #fff;
			}
			.container-update > .update > a img {
				width: 15px;
				height: 15px;
			}
			.container-update > .update .user-update {
				border-radius: 5px;
				width: 150px;
				height: 30px;
				line-height: 30px;
				font-size: 16px;
				text-align: center;
				box-sizing: border-box;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="container-update">
			<div class="update">
				<p>修改用户信息</p><a href="javascript:;"><img src="../../images/cancel.png" alt=""></a>
				<section>
					<label for="tel">手机号</label><input id="tel" type="text">
				</section>
				<section>
					<label for="pwd">密码</label><input id="pwd" type="text">
					<span id="pwd"></span>
				</section>
				<section>
					<label for="ulevel">权限</label>
					<select name="ulevel" id="ulevel">
						<option value="3" value1="5">普通用户</option>
						<option value="6" value1="5\asjhdvajhvd">管理员</option>
						<option value="9" value1="5\441damsvd">系统管理员</option>
					</select>
				</section>
				<section>
					<button class="user-update">提交</button>
				</section>
			</div>
		</div>
	</body>
	<script>
		let ulevelEle = document.querySelector("#ulevel");
		let updEle = document.querySelector(".user-update");
		updEle.onclick = function (){
			console.log(ulevelEle.selectedOptions[0].attributes.value.value);
			console.log(ulevelEle.selectedOptions[0].attributes.value1.value);
		}
	</script>
</html>
